<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>失智病人列表</title>
  <link rel="stylesheet" href="css/base.css" type="text/css">
  <link rel="stylesheet" href="css/style.css" type="text/css">
  <link rel="stylesheet" href="css/mui.min.css" type="text/css">
  <link rel="stylesheet" href="css/app.css" type="text/css">
  <style>
    .mui-search{
      width:100%;
      height: 45px;
      padding-left:5px;
      position:relative;
      /*float:right;*/
      /*margin-top: 50px;*/
    }
    .mui-search input[type=search]{
      width:74%;
      float: right;
      padding-left: 10px;
      margin-bottom: 8px;
      font-size:14px !important;
    }
    .mui-search:before{
      top:60%;
    }
    .mui-search.mui-active:before {
      /*left:22%;*/
      display:none;
    }
    .mui-search .mui-placeholder{
      text-align: center;
      padding-left:34px;
    }
    .mui-input-row.mui-search .mui-icon-clear{
      right:52px;
      display: block;
    }
    .mui-input-row .mui-btn{
      width:58px;
      height: 30px;
      margin-top:2px;
      border-radius: 15px;
      position: absolute;
      right:0;
      padding: 0;
      z-index:8;
      border:none;
      background: linear-gradient(to right, #5583EE, #41D8DD ); /* 标准的语法 */
    }
    #searchValue{
      width:24%;
      height: 32px;
      font-size: 12px;
      background: #CCCCCC;
      text-align: center;
      color:#666666;
      padding:0 4px;
      z-index:8;
      position: absolute;
      border:#ccc solid 1px !important;
      background:#ffffff url(img/icon_expand.png) no-repeat 92% center;
    }
  </style>
</head>
<body>
<!--&lt;!&ndash;<span class="mui-icon mui-icon-weixin" id="searchValue"></span>&ndash;&gt;-->

<div class="mui-input-row mui-search">
  <select class="" id="searchValue" onchange="selectSearchType()">
    <option value="1" selected>身份证</option>
    <option value="2">姓名</option>
    <option value="3">建档医生</option>
  </select>
  <input id="searchInput" type="search" class="mui-input-clear" placeholder="请输入身份证号" maxlength="18">
  <button type="button" class="search mui-btn mui-btn-primary" onclick="search();">搜索</button>
</div>
<div id="container">
  <div class="loading" style="text-align: center;padding-top:60px;">
    <img src="img/loading.gif" alt="" style="width:50px;">
  </div>
  <div class="consumablesList">
    <div id="list"></div>
    <p class="noData" style="text-align: center;display:none;margin:20px 0;">暂无数据</p>
  </div>
</div>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/mui.min.js" type="text/javascript"></script>
<script src="js/style.js" type="text/javascript"></script>
<script src="js/template.js" type="text/javascript"></script>
<!--<script th:src="@{/js/template.js}"></script>-->
<script id="tpl" type="text/html">
  <ul class="mui-table-view">
    <%for(var i in items){%>
    <li class="mui-table-view-cell mui-media">
      <a href="javascript:void(0)" onclick="toHref('<%=items[i].idcard%>')">
        <img class="mui-media-object mui-pull-left" src="img/protrait.png" style="margin-top:28px;">
        <div class="mui-media-body">
          <span class="name" style="display: block;width:100%;border-bottom:#eeeeee dashed 1px;">姓名：<%=items[i].realname%></span>
          <p class='mui-ellipsis'>
            <span class="left"><%=items[i].gender == 1 ?  '性别：男' :  '性别：女'%></span>
          </p>
          <p class='mui-ellipsis'>
            <span>人群：<%=items[i].diseaseName%></span>
          </p>
          <p class='mui-ellipsis'>
            <span>建档医生：<%=items[i].doctor%></span>
          </p>
          <p class='mui-ellipsis'>
            <span class="idcard">身份证号：<%=items[i].idcard%></span>
          </p>
        </div>
      </a>
    </li>
    <%}%>
  </ul>
</script>
<script>
  var dataList = [];
  var diseaseType = '';
  $(function(){
    // debugger
    diseaseType = location.search.split('=')[1];
    getList(diseaseType);
  })
  function toHref(idcard){
    // debugger
    window.location.href = 'personalInfo.html?idcard='+idcard ;
  }
  function selectSearchType(){
    // debugger
    var searchType = $('#searchValue').val();

    if(searchType == 1){
      $('.mui-icon-search').next('span').text('请输入身份证号');
    }else if(searchType == 2){
      $('.mui-icon-search').next('span').text('请输入病人姓名');
    }else{
      $('.mui-icon-search').next('span').text('请输入建档医生');
    }
  }
  function getList(type,idcard,realname,doctor){
    $('.loading').show();
    $.ajax({
      url: '/medical-cloud/pppatientbase/queryListBySearch/10000039',
      dataType: 'json',
      data: {
        realname: realname,
        doctor: doctor,
        idcard: idcard,
        diseasesType: type,
        iDisplayStart: 0,
        iDisplayLength: 10000,
      },
      type: 'get',
      success: function(data){
        $('.loading').hide();
       if( data.dataList.length == 0 ) {
         $('.noData').show();
       }else{
         $('.noData').hide();
       }
//         $('.consumablesList ul li').remove()
//         dataList = data.dataList;
//
        var listData = {
          items:data.dataList
        }
        var html = template(document.getElementById('tpl').innerHTML,listData);

        document.getElementById('list').innerHTML = html;
      }
    })
  }
  function search(){
    var idcard,realname,doctor;
    var searchType = $('#searchValue').val();
    if(searchType == 1){
      realname = '';
      doctor = '';
      var idcard = $('#searchInput').val();
    }else if(searchType == 2){
      doctor = '';
      idcard = '';
      var realname = $('#searchInput').val();
    }else{
      idcard = '';
      realname = '';
      var doctor = $('#searchInput').val();
    }
    getList(diseaseType,idcard,realname,doctor);
  }
</script>
</body>
</html>
